<div class="ngm-tables-join__container">
    <ng-container *ngFor="let item of tables$ | async; index as i; first as isFirst; last as isLast; trackBy: trackById">
        <div *ngIf="!isFirst" class="table-join">
            <span class="join-icon join-icon-with-connector"
                [ngClass]="{
                'inner-join-icon': !item.join?.type || item.join.type === 'Inner',
                'left-join-icon': item.join?.type === 'Left',
                'right-join-icon': item.join?.type === 'Right'
                }"
                [matMenuTriggerFor]="joinMenu"
                [matMenuTriggerData]="{table: item}"
            ></span>
        </div>
    
        <div class="join-table">
            <span class="join-table-name">
                {{ item.name }}
            </span>
        
            <button mat-icon-button displayDensity="compact"
                [matMenuTriggerFor]="tableMenu"
                [matMenuTriggerData]="{table: item}"
            >
                <mat-icon>more_vert</mat-icon>
            </button>
        </div>
    </ng-container>
</div>

<mat-menu #tableMenu="matMenu" class="ngm-density__compact">
    <ng-template matMenuContent let-table="table">
        <button mat-menu-item ngmAppearance="danger" (click)="removeTable(table)">
            <mat-icon>delete_forever</mat-icon>{{'PAC.KEY_WORDS.REMOVE' | translate: {Default: "Remove"} }}
        </button>
    </ng-template>
</mat-menu>

<mat-menu #joinMenu="matMenu" class="ngm-tables-join__join-menu">
    <ng-template matMenuContent let-table="table">
        <div (click)="$event.preventDefault();$event.stopPropagation()">
            <div class="flex justify-around items-center">
    
                <div class="table-join" [ngClass]="{selected: table.join?.type === 'Left'}" (click)="changeJoinType(table, 'Left')">
                    <span class="join-icon left-join-icon"></span>
                </div>
    
                <div class="table-join" [ngClass]="{selected: table.join?.type === 'Inner'}" (click)="changeJoinType(table, 'Inner')">
                    <span class="join-icon inner-join-icon"></span>
                </div>
    
                <div class="table-join" [ngClass]="{selected: table.join?.type === 'Right'}" (click)="changeJoinType(table, 'Right')">
                    <span class="join-icon right-join-icon"></span>
                </div>
    
            </div>
    
            <mat-divider></mat-divider>
    
            <div class="join-fields-form flex flex-col justify-start items-stretch" displayDensity="compact">

                <button *ngIf="table.join?.type && !table.join?.fields?.length" class="fit-form-field" displayDensity="compact" mat-button
                    (click)="addJoinField(table)">
                    <mat-icon>add</mat-icon>
                </button>
    
                <div *ngFor="let joinField of table.join?.fields;index as i; first as isFirst; last as isLast"
                    class="join-field-item flex justify-around items-center">
                    
                    <ngm-input [label]="'PAC.MODEL.ENTITY.LeftKey' | translate: {Default: 'Left Key'}"
                        [ngModel]="joinField.leftKey" (ngModelChange)="changeLeftKey(table, i, $event)"
                        [options]="selectLeftTableFields(table) | async"
                        (click)="$event.preventDefault();$event.stopPropagation()">
                    </ngm-input>
    
                    <div class="fit-form-field">
                        {{'PAC.MODEL.ENTITY.Equal' | translate: {Default: "Equal"} }}
                    </div>

                    <ngm-input [label]="'PAC.MODEL.ENTITY.RightKey' | translate: {Default: 'Right Key'}"
                        [ngModel]="joinField.rightKey" (ngModelChange)="changeRightKey(table, i, $event)"
                        [options]="selectTableType(table) | async"
                        (click)="$event.preventDefault();$event.stopPropagation()">
                    </ngm-input>
    
                    <button *ngIf="isFirst" class="fit-form-field" mat-button (click)="addJoinField(table)">
                        <mat-icon>add</mat-icon>
                    </button>

                    <button *ngIf="!isFirst" class="fit-form-field" mat-button (click)="removeJoinField(table, i)">
                        <mat-icon>close</mat-icon>
                    </button>
                </div>
    
            </div>
        </div>
    </ng-template>

</mat-menu>
